<style>
    .dux-material-panel {
        background: #f5f5f5;
    }
</style>

<div class="dux-page-header uk-clearfix">
    <div class="page-title">
        <a class="uk-button uk-button-primary" href="{url('index')}"> 规则列表</a>
    </div>
    <div class="page-action">
        <a class="uk-button uk-button-danger" href="javascript:location.reload();"><i class="fa fa-refresh"></i></a>
    </div>
</div>

<div class="uk-margin-top">
    <div class="uk-card uk-card-default uk-card-small dux-panel">
        <div class="uk-card-header">{$assignName}规则</div>
        <div class="uk-card-body">
            <form class="dux-form uk-form   uk-form-horizontal " data-dux="form-bind" method="post">
                <fieldset>
                    <div class="uk-form-group">
                        <label class=" uk-form-label">规则名称</label>
                        <div class="uk-form-controls">
                            <input type="text" name="name" value="{$info.name}" placeholder="请输入规则名称" required>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">优先级</label>
                        <div class="uk-form-controls">
                            <input type="number" name="priority" value="{$info.priority ? $info.priority : 0}">
                            <div class="uk-form-help">优先级越高越容易触发</div>
                        </div>
                    </div>


                    <div class="uk-form-group">
                        <label class=" uk-form-label">触发关键词</label>
                        <div class="uk-form-controls">
                            <input type="text" name="keywords" value="{$info.keywords}" placeholder="多个规格请用,分割" data-dux="form-tags">
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <label class=" uk-form-label">匹配类型</label>
                        <div class="uk-form-controls uk-form-controls-text"><div class="uk-grid">
                            <label>
                                <!--if{!$info['match']}-->
                                <input name="match" value="0" checked="checked" type="radio">
                                <!--{else}-->
                                <input name="match" value="0" type="radio">
                                <!--{/if}-->
                                精确匹配
                            </label>
                            <label>
                                <!--if{$info['match']}-->
                                <input name="match" checked="checked" value="1" type="radio">
                                <!--{else}-->
                                <input name="match" value="1" type="radio">
                                <!--{/if}-->
                                模糊匹配
                            </label>
                        </div>
                    </div>

                    </div><div class="uk-form-group">
                        <label class=" uk-form-label">图文素材</label>
                        <div class="uk-form-controls">
                            <button class="uk-button uk-button-primary" type="button" data-dux="dialog-open" data-width="800px" data-height="600px" data-url="{url('wechat/MaterialNews/dialog')}" data-title="选择素材"><i class="fa fa-files-o"></i> 选择图文素材</button>

                            <p></p>
                            <div id="news">

                                <!--if{empty($materialInfo.data)}-->
                                未选择图文素材
                                <!--{else}-->

                                <div class="dux-material-panel" style="width: 310px">
                                    <a class="panel-top" href="{$materialInfo.data[0]['url']}" target="_blank">
                                        <div class="body">
                                            <img src="{$materialInfo.data[0]['image']}" alt="">
                                            <h2 data-title>{$materialInfo.data[0]['title']}</h2>
                                        </div>
                                    </a>
                                    <div class="panel-list">
                                        <!--loop{$materialInfo.data as $key => $v}-->
                                        <!--if{$key > 0}-->
                                        <a class="panel-item uk-clearfix" href="{$v.url}" target="_blank">
                                            <div class="pic">
                                                <img src="{$v.image}" alt="">
                                            </div>
                                            <h3 data-title>{$v.title}</h3>
                                        </a>
                                        <!--{/if}-->
                                        <!--{/vo}-->
                                    </div>
                                </div>

                                <!--{/if}-->

                            </div>
                        </div>
                    </div>

                    <div class="uk-form-group">
                        <div class="uk-form-controls">
                            <input type="hidden" name="type" value="news">
                            <input type="hidden" name="media_id" id="media_id" value="{$materialInfo.media_id}">
                            <input type="hidden" name="reply_id" value="{$info.reply_id}">
                            <button class="uk-button uk-button-primary" type="submit" disabled>保存</button>
                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>
</div>

<script type="text/html" id="news-tpl">
    <div class="dux-material-panel" style="width: 310px">
        <a class="panel-top" href="{{d[0].url}}" target="_blank">
            <div class="body">
                <img src="{{d[0].image}}" alt="">
                <h2 data-title>{{d[0].title}}</h2>
            </div>
        </a>
        <div class="panel-list">
            {{# for(var i = 0; i < d.length; i++){ }}

            {{# if(i > 0){ }}
            <a class="panel-item uk-clearfix" href="{{d[i].url}}" target="_blank">
                <div class="pic">
                    <img src="{{d[i].image}}" alt="">
                </div>
                <h3 data-title>{{d[i].title}}</h3>
            </a>
            {{# } }}
            {{# } }}
        </div>
    </div>

</script>


<script>
    Do('base', 'tpl', function() {
        window.selectNews = function(mediaId, data) {
            $('#media_id').val(mediaId);
            var tpl = $('#news-tpl').html();
            laytpl(tpl).render(data, function(render){
                $('#news').html(render);
            });

        }
    });
</script>